<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <!-- <script src="lib/http.js"></script> -->
    <script src="lib/index.js"></script>
    <script src="lib/seach.js"></script>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div id="app">
        <div class="search">
            <input type="text" value="你" id="input">
            <button id="btn"></button>
        </div>
        <div class="sousuo">
            搜索“你”，找到
            <em class="s-fc6">20</em> 
            张专辑
        </div>
        <div class="container">

        </div>
    </div>

    <script>
                    var listUrl = "http://192.168.4.18:3000/search?keywords=%E4%BD%A0&type=10"
                    ajax({url:listUrl,method:"get",success:res=>{
                        // console.log(res)
                        var arr = res.result.albums
                        // console.log(arr.slice(0,20))
                        var s =arr.slice(0,20)
                        console.log(s)
                        s.forEach((item,index)=>{
                            var name = item.name;                    
                            console.log(name)

                            var head = item.artist.name;
                            console.log(head)

                            
                        var htmlItem = `
                        
                            <div class ="cover"> 
                                <img src ="${item.blurPicUrl}" alt="">
                                <div class="txt-bottom">
                                    <p class="title">${name}</p>
                                    <p class="name">by  ${head}</p>
                                </div>
                            </div>
                        
                        
                            `
                            $(".container").append(htmlItem) 
                    })
                        
                    }})
                </script>
</body>
</html>